import { LoadIcon } from '../bs-icons/loading'
import { SEPARATOR_TEXT } from './constants'
import LlmIcon from './LlmIcon'
import Separator from './Separator'
import { ContentType } from './types'

export default function MessageSystem({ data }: { data: ContentType }) {
  const msg = data.text

  let content = (
    <div className="w-fit max-w-[90%]">
      <div>
        <LoadIcon className="text-gray-400" />
      </div>
    </div>
  )

  if (msg === SEPARATOR_TEXT) {
    content = <Separator text={msg} />
  } else if (msg) {
    content = (
      <div className="w-fit max-w-[90%]">
        <div className="flex gap-[12px]">
          <LlmIcon avatarColor="#111111" />
          <span className="chat-role-name">智能助手</span>
        </div>
        <div className="chat-custom-content ml-[34px] min-h-8 rounded-2xl bg-[#F5F7FB] p-[16px] dark:bg-[#313336]">
          <div className={msg.toString() ? 'flex gap-2' : 'flexRowStart gap-2'}>
            {/* <LlmIcon avatarColor="#111111" /> */}
            {msg}
          </div>
        </div>
      </div>
    )
  }

  return <div className="py-1">{content}</div>
}
